<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">旅游攻略</li>
            </ol>
          </nav>
        </div>
        <div class="col-md-8">
          <h1 class="fw-bold">旅游攻略</h1>
          <p class="text-muted">专业旅行指南，助您规划完美旅程</p>
        </div>
        <div class="col-md-4 text-md-end">
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="搜索攻略..." aria-label="Search">
            <button class="btn btn-outline-primary" type="submit">
              <i class="bi bi-search"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-8">
          <div v-for="(post, index) in blogPosts" :key="index" class="card border-0 shadow-sm mb-4">
            <div class="row g-0">
              <div class="col-md-4">
                <div class="bg-light h-100"></div>
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <div class="mb-2">
                    <span class="badge bg-primary me-2">{{ post.category }}</span>
                    <span class="text-muted small">{{ post.date }}</span>
                  </div>
                  <h5 class="card-title fw-bold">{{ post.title }}</h5>
                  <p class="card-text">{{ post.excerpt }}</p>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                      <span class="me-3"><i class="bi bi-eye me-1"></i> {{ post.views }}</span>
                      <span><i class="bi bi-chat-dots me-1"></i> {{ post.comments }}</span>
                    </div>
                    <NuxtLink :to="'/blog/' + index" class="btn btn-sm btn-primary">阅读更多</NuxtLink>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item active"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
        </div>
        
        <div class="col-lg-4">
          <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white fw-bold">
              <i class="bi bi-tags me-2"></i>热门标签
            </div>
            <div class="card-body">
              <div class="d-flex flex-wrap gap-2">
                <span class="badge bg-light text-dark">欧洲</span>
                <span class="badge bg-light text-dark">亚洲</span>
                <span class="badge bg-light text-dark">海岛</span>
                <span class="badge bg-light text-dark">自驾游</span>
                <span class="badge bg-light text-dark">亲子游</span>
                <span class="badge bg-light text-dark">背包客</span>
                <span class="badge bg-light text-dark">美食</span>
                <span class="badge bg-light text-dark">摄影</span>
                <span class="badge bg-light text-dark">温泉</span>
                <span class="badge bg-light text-dark">购物</span>
              </div>
            </div>
          </div>
          
          <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white fw-bold">
              <i class="bi bi-fire me-2"></i>热门文章
            </div>
            <div class="card-body">
              <div v-for="(post, index) in popularPosts" :key="index" class="d-flex mb-3">
                <div class="bg-light me-3" style="width: 80px; height: 80px;"></div>
                <div>
                  <h6 class="mb-1">
                    <NuxtLink :to="'/blog/' + (index + 10)" class="text-decoration-none">
                      {{ post.title }}
                    </NuxtLink>
                  </h6>
                  <div class="text-muted small">
                    <i class="bi bi-eye me-1"></i> {{ post.views }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-bold">
              <i class="bi bi-archive me-2"></i>文章归档
            </div>
            <div class="card-body">
              <ul class="list-unstyled">
                <li class="mb-2"><a href="#" class="text-decoration-none">2024年5月 (12)</a></li>
                <li class="mb-2"><a href="#" class="text-decoration-none">2024年4月 (8)</a></li>
                <li class="mb-2"><a href="#" class="text-decoration-none">2024年3月 (15)</a></li>
                <li class="mb-2"><a href="#" class="text-decoration-none">2024年2月 (7)</a></li>
                <li class="mb-2"><a href="#" class="text-decoration-none">2024年1月 (10)</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

useHead({
  title: '旅游攻略 - TravelExplorer'
})

const blogPosts = [
  {
    title: '欧洲十国自由行全攻略',
    excerpt: '一次旅行走遍十个欧洲国家，这份详细攻略帮你省去所有烦恼...',
    category: '欧洲',
    date: '2024-05-15',
    views: 12500,
    comments: 42
  },
  {
    title: '日本关西地区深度游指南',
    excerpt: '从大阪到京都，探索关西地区的传统文化与现代魅力...',
    category: '亚洲',
    date: '2024-05-10',
    views: 9800,
    comments: 31
  },
  {
    title: '马尔代夫选岛终极指南',
    excerpt: '如何选择最适合自己的马尔代夫岛屿？这篇指南告诉你一切...',
    category: '海岛',
    date: '2024-05-05',
    views: 15600,
    comments: 56
  },
  {
    title: '国内自驾游路线推荐',
    excerpt: '五条绝美的国内自驾游路线，带你领略祖国大好河山...',
    category: '自驾游',
    date: '2024-04-28',
    views: 8700,
    comments: 28
  },
  {
    title: '亲子游必去的十大景点',
    excerpt: '带上孩子一起旅行，这些地方既有趣又教育意义十足...',
    category: '亲子游',
    date: '2024-04-22',
    views: 11200,
    comments: 39
  }
]

const popularPosts = [
  { title: '东南亚 backpacker 路线图', views: 24500 },
  { title: '欧洲火车通行证购买指南', views: 19800 },
  { title: '签证办理全流程解析', views: 18700 },
  { title: '出国旅行必备APP推荐', views: 16500 }
]
</script>